<script setup>
import HomePannel from './HomePannel.vue'
defineProps({
  shopList: {
    type: Array,
    default: () => []
  }
})
</script>
<template>
  <HomePannel title="热销店铺" subTitle="校内车源  当面交易  购买更放心">
    <ul class="cars-list">
      <li v-for="item in shopList" :key="item.id">
        <RouterLink :to="`list/?campusOrShopId=${item.id}`">
          <div
            class="img-area"
            :style="{ backgroundImage: `url(${item.picture})` }"
          ></div>
          <p class="name">{{ item.name }}</p>
        </RouterLink>
      </li>
    </ul>
    <div class="panel-more">
      <a
        class="btn"
        href="javascript:;"
        @click="$router.push('/campusOrShop/2')"
        >查看更多
        <el-icon class="icon"><i-ep-ArrowRight /></el-icon>
      </a>
    </div>
  </HomePannel>
</template>
<style lang="scss" scoped>
.cars-list {
  display: flex;
  justify-content: space-around;
  padding: 10px 0 40px;
  li {
    padding-bottom: 20px;
    transition: all 0.5s;

    background-color: #fff;
    border-radius: 10px;

    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }

    .img-area {
      width: 280px;
      height: 180px;

      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
    }
  }
}

.panel-more {
  text-align: center;

  .btn {
    display: inline-block;
    width: 200px;
    height: 45px;
    padding-left: 15px;

    line-height: 45px;
    font-size: 18px;
    color: $helpColor;
    border: 1px solid $helpColor;

    .icon {
      position: relative;
      top: 2px;
    }
  }
}
</style>
